<template>
  <div style="background:#f8f8f8;">
    <!-- 顶部导航栏 -->
    <div class="product-header">
      <div class="product-header-container">
        <div class="goback" @click="$router.go(-1)">
          <i class="back"></i>
        </div>
        <div class="product-tabs">
          <span @click="switchTabs('mainLayout')" :class="['product-tabs-item',containerTab==='mainLayout'?'active':'']">商品</span>
          <span @click="switchTabs('stockDetail')" :class="['product-tabs-item',containerTab==='stockDetail'?'active':'']">库存</span>
          <div id="loadingbar" :style="containerTab==='mainLayout' ? 'left:1%' :  'left:65.66%'"></div>
        </div>
        <div class="other">
          <i class="iconfont icon-cart" @click="$router.push('/cart')" ><mt-badge size="small" color="#FE4F20">{{cartNum}}</mt-badge></i>
          <i class="menu"></i>
        </div>
      </div>
    </div>
    <!-- 顶部导航栏 -->
    <!-- 内容区 -->
    <mt-tab-container v-model="containerTab" style="padding-top: 1.25rem;">
      <!-- 商品 -->
      <mt-tab-container-item id="mainLayout" v-if="containerTab==='mainLayout'">
        <div id="mainLayout">
          <!-- 商品轮播图 -->
          <div class="prouct-swiper">
            <mt-swipe @change="handleChange" :stopPropagation="true" :prevent="true" class="scroll-images">
              <mt-swipe-item v-for="(item,index) in imgList" :key="index">
                <img :src="item">
              </mt-swipe-item>
            </mt-swipe>
          </div>
          <!-- 商品轮播图 -->
          <!-- 商品信息 -->
          <div class="product-title-text">
            <p class="product-name-text">{{productInfo.sellingPoints}}</p>
            <p class="product-summary-text">{{productInfo.summary}}</p>
            <div class="product-price">
              <div class="left">
                <span>&yen;</span>
                <strong>{{purchasePrice|formatMoney}}</strong>
                <span class="original-price">&yen;<i>{{productInfo.goodsMoney|formatMoney}}</i></span>
              </div>
              <mt-button class="right" size="small" @click="switchTabs('stockDetail')">
                添加至购物车
              </mt-button>
            </div>

          </div>
          <!-- 商品详细信息 -->
          <div class="product-info">
            <h1>参数</h1>
            <table>
              <thead>
                <tr>
                  <th>
                    货号
                  </th>
                  <th>
                    {{productInfo.goodsCode}}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    品牌
                  </td>
                  <td>
                    {{productInfo.brandName}}
                  </td>
                </tr>
                <tr>
                  <td>
                    款式
                  </td>
                  <td>
                    {{productInfo.goodsStyle}}
                  </td>
                </tr>
                <tr>
                  <td>
                    标准零售价
                  </td>
                  <td>
                    {{productInfo.goodsMoney|formatMoney}}
                  </td>
                </tr>
                <tr>
                  <td>
                    上市时间
                  </td>
                  <td>
                    {{productInfo.goodsYear}}
                  </td>
                </tr>
                <tr>
                  <td>
                    试穿季节
                  </td>
                  <td>
                    {{productInfo.goodsSeason|goodsSeason}}
                  </td>
                </tr>
                <tr>
                  <td>
                    试穿性别
                  </td>
                  <td>
                    {{productInfo.goodsSex|goodsSex}}
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="img-list">
              <div v-for="(item,index) in productInfo.imgsList" :key="index">
                <img v-lazy="item.goodsPath+item.goodsImg">
              </div>
            </div>
          </div>
          <!-- 商品详细信息 -->

        </div>
      </mt-tab-container-item>
      <!-- 商品 -->
      <!-- 商品库存信息 -->
      <mt-tab-container-item id="stockDetail">
        <div id="stockDetail">
          <div class="good-info-top" v-if="productInfo">
            <div class="prod">
              <div class="img-warp">
                <img :src="thumbImg" alt="">
              </div>
              <div class="prod-info">
                <p class="prod-title">
                  {{productInfo.sellingPoints}}
                </p>
                <p class="prod-code">
                  {{productInfo.goodsCode}}
                </p>
                <p class="prod-price"> 标准零售价: <span>&yen;</span>{{productInfo.goodsMoney}}</p>
              </div>
            </div>
            <ul class="stock-header">
              <li class="item"> 尺码</li>
              <li class="item"> 价格</li>
              <li class="item"> 数量</li>
              <li class="item"></li>
            </ul>
          </div>
          <div class="stock-info clearfix" v-if="stockData">
            <!--如果不是激想的不显示-->
            <div class="supplier" v-for="(item,index) in stockData" :key="index" v-if="item.uId!='115d742f38a8434ba471bd53135f874e'">
              <div class="supplier-name">
                {{item.supplierWarehouse}}
              </div>
              <ul class="stock-list">
                <li class="" v-for="spec in item.specList" :key="spec.sizeId">
                  <div class="stock-item">{{spec.sizeName}} <span v-if="spec.sizeAlias">({{spec.sizeAlias}})</span> </div>
                  <div class="stock-item">{{item.purchasePrice}}</div>
                  <div class="stock-item">{{spec.goodsStockNum}}</div>
                  <div class="stock-item">
                    <button @click="addShopCart(item,spec.sizeId)">添加至购物车</button>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
      <!-- 商品库存信息 -->
    </mt-tab-container>
    <!-- 内容区 -->
    <!-- 返回顶部 -->
    <BackHead/>
    <!-- 返回顶部 -->
  </div>
</template>

<script>
  import BackHead from '@/components/common/backHead'
  import {
    Toast,
    TabContainer,
    TabContainerItem,
    Swipe,
    SwipeItem
  } from 'mint-ui'
  import {
    mapGetters
  } from 'vuex'
  import {
    getGoodsDetails,
    getGoodSpec,
    addShopCart
  } from '@/api/shop'

  export default {
    data() {
      return {
        goodsId: '',
        purchasePrice: 0,
        stockData: [],
        containerTab: 'mainLayout',
        detailTab: 'description',
        productInfo: {},
        shopInfo: null,
        params: {
          status: 1 // 1 采购 2 分销
        },
        swipeIndex: {
          nowIndex: 1,
          total: 0
        },
        thumbImg: '',
        imgList: []
      }
    },

    watch: {

    },
    components: {
      TabContainer,
      TabContainerItem,
      Swipe,
      SwipeItem,
      BackHead
    },

    computed: {
      ...mapGetters([
        'userInfo',
        'cartNum'
      ])
    },
    methods: {
      switchTabs(Id) {
        if (this.containerTab === String(Id)) return
        this.containerTab = Id
        switch (String(this.containerTab)) {
          case 'mainLayout':
            break
          case 'stockDetail':
            break
          default: // 其他
            throw new Error('未知TabId')
        }
      },
      handleChange(index) {
        this.swipeIndex.nowIndex = index + 1
      },
      addShopCart(item, sizeId) { // 加入购物车
        const params = {
          userId: this.userInfo.id,
          status: this.params.status,
          uId: item.uId,
          goodsDetailsId: item.goodsDetailsId,
          sizeId: sizeId,
          cartNum: 1
        }
        addShopCart(params)
          .then(response => {
            this.getCartNum()
            Toast({
              message: '添加成功',
              position: 'bottom',
              duration: 1000
            })
          }).catch(err => {
            Toast({
              message: err.info,
              position: 'bottom',
              duration: 1000
            })
          })
      },
      getCartNum() {
        // 如果没有商品种类数量
        const formData = {
          userId: this.userInfo.id,
          status: this.params.status
        }
        // 获取购物车商品种类数量
        this.$store.dispatch('getCartProductList', formData)
      },
      fetchData() { // 获取商品详情
        this.goodsId = this.$route.params.id
        getGoodsDetails({
          goodsId: this.goodsId,
          userId: this.userInfo.id
        }).then(res => {
          this.productInfo = res.data.goodsDetails
          // 轮播图
          this.productInfo.imgsList.map((el, index) => {
            if (el.goodsImg.substring(2, 0) !== '60') {
              this.imgList.push(el.goodsPath + el.goodsImg)
              if (el.goodsImg === '5.jpg') {
                this.thumbImg = el.goodsPath + el.goodsImg
              }
            }
          })
          this.imgList = this.imgList.reverse()
          // 缩略图
          this.thumbImg === '' ? this.imgList[0] : this.thumbImg
        })
        // 获取尺码信息
        getGoodSpec({
          goodsId: this.goodsId
        }).then(res => {
          this.stockData = res.data.supplierList
          // 获取价格最小
          this.purchasePrice = Math.min.apply(Math, this.stockData.map(item => {
            return item.purchasePrice
          }))
        }).catch(() => {})
      }
    },

    mounted() {
      this.fetchData()
      this.getCartNum()
    },
    filters: {
      // 商品季节：1春季2夏季3秋季4冬季
      goodsSeason(value) {
        switch (value) {
          case 1:
            return '春季'
          case 2:
            return '夏季'
          case 3:
            return '秋季'
          case 4:
            return '冬季'
        }
      },
      // 商品性别：1男 2女 3中性
      goodsSex(value) {
        switch (value) {
          case 1:
            return '男'
          case 2:
            return '女'
          case 3:
            return '中性'
        }
      }
    }
  }

</script>
<!-- product -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  /* 顶部导航栏 */

  .product-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    height: 1.25rem;
    background: #fff;
    border-bottom: 1px solid $border;
    .product-header-container {
      height: 100%;
      padding: 0px $padding;
      @include flexbox(space-between, center, row, nowrap);
      .goback {
        i {
          display: block;
          width: .65rem;
          height: .65rem;
          background: url('~assets/common/images/arrow-left.png') no-repeat;
          background-size: 100%;
        }
      }
      .product-tabs {
        max-width: 3.5rem;
        height: 100%;
        @include flexbox(space-between,
        center,
        row,
        nowrap);
        position: relative;
        #loadingbar {
          position: absolute;
          transition: .4s;
          width: calc((100%/3));
          background: #000;
          bottom: -1px;
          height: 2px;
        }
        .product-tabs-item {
          width: 33.33%;
          @include flexbox(center,
          center,
          row,
          nowrap);
          flex: initial;
          text-align: center;
          color: #333;
          font-size: $subtitle;
          height: 100%;
          &.active {
            font-size: $title;
          }
        }
      }
      .other {
        max-width: 1.5rem;
        height: 100%;
        @include flexbox(space-between,
        center,
        row,
        nowrap);
        .icon-cart {
          position: relative;
          display: block;
          font-size: 24px;
          .mint-badge {
            position: absolute;
            left: 12px;
            top: 0;
          }
        }
        .menu {}
      }
    }
  }
  /* 顶部导航栏 */
  /* 商品 */

  #mainLayout {
    .prouct-swiper {
      box-shadow: 0px 0px 6px 1px #eee;
      position: relative;
      .swiper-indicators {
        font-size: $title;
        z-index: 666;
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        background: rgba(0, 0, 0, .15);
        right: 15px;
        bottom: 11px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        overflow: hidden;
      }
      .scroll-images {
        text-align: center;
        background: #ffffff;
        height: 8rem;
        .mint-swipe-item {
          display: flex;
          /*Flex布局*/
          display: -webkit-flex;
          /* Safari */
          align-items: center;
          /*指定垂直居中*/
          img {
            margin: auto;
            max-width: 100%;
            max-height: 100%;
          }
        }
      }
    }
    .product-title-text {
      @include flexbox(space-between,
      flex-start,
      column,
      wrap);
      padding: $padding;
      background: #fff;
      .product-name-text {
        font-size: $title;
        color: #232326;
        @include textoverflow(2);
      }
      .product-price {
        padding-top: 5px;
        @include flexbox(space-between,
        center,
        row,
        nowrap);
        width: 100%;
        .left {
          color: #f23030;
          text-align: left;
          span {
            font-size: 14px;
            margin-right: 3px;
          }
          strong {
            font-size: 20px;
          }
          .original-price {
            color: #999;
            font-size: 12px;
            i {
              text-decoration: line-through;
            }
          }
        }
        .right {
          color: #ffffff;
          background-color: #FF5959;
          box-shadow: 0 0 1px #FF5959;
          padding: 0px 10px;
          height: 26px;
        }
      }
    }
    .product-info {
      margin-top: $margin;
      background: #fff;
      h1 {
        padding: $padding;
        color: #333333;
        font-weight: 600;
        font-size: 16px;
      }
      table {
        border-collapse: collapse;
        width: 100%;
        color: #232323;
        th {
          border-top: 1px solid #e4e4e4;
          border-bottom: 1px solid #e4e4e4;
          padding: 10px;
          text-align: left;
          font-weight: normal;
          &:first-child {
            color: #b5b5b5;
          }
        }
        td {
          border-left: 1px solid #e4e4e4;
          border-bottom: 1px solid #e4e4e4;
          padding: 10px;
          &:first-child {
            background: #f9f9f9;
            color: #b5b5b5;
            border-left: 0px;
          }
        }
      }
      .img-list {
        padding: $padding;
        img {
          width: 100%;
          height: auto
        }
      }
    }
  }
  /* 商品 */
  /* 商品库存信息 */

  #stockDetail {
    .good-info-top {
      position: fixed;
      top: 1.25rem;
      z-index: 1000;
      @include flexbox(space-between,
      flex-start,
      column,
      nowrap);
      background: #fff;
      .prod {
        border-bottom: 1px solid #eee;
        background: #fff;
        @include flexbox(space-between,
        flex-start,
        row,
        nowrap);
        padding: 5px 0px 0px 5px;
        flex: initial;
        .img-warp {
          width: 100px;
          height: 100px;
          img {
            margin: auto;
            display: block;
            max-width: 100%;
            max-height: 100%;
          }
        }

        .prod-info {
          font-size: 14px;
          color: #333;
          margin-left: 10px;
          padding-right: 5px;
          @include flexbox(space-between,
          flex-start,
          column,
          wrap);
          .prod-title {
            @include textoverflow(2);
            line-height: 18px;
          }
          .prod-code {
            padding: 5px 0;
          }
          .prod-price {
            padding: 5px 0;
            text-align: left;
            span {
              font-size: 14px;
              margin-right: 5px;
            }
          }
        }
      }
      .stock-header {
        background: #fff;
        width: 100%;
        @include flexbox(space-between,
        center,
        row,
        nowrap);
        -moz-box-shadow: 0px 1px 2px #D4DCE1;
        -webkit-box-shadow: 0px 1px 2px #D4DCE1;
        box-shadow: 0px 1px 2px #D4DCE1;
        .item {
          @include flexbox(center,
          center,
          row,
          nowrap);
          color: #333;
          font-size: 14px;
          flex-grow: 1;
          padding: 12px 0;
          &:last-child {
            flex-grow: 1.5
          }
        }
      }
    }
    .stock-info {
      width: 100%;
      position: relative;
      padding-top: 147px;
      background: #FCFCFC;
      height: auto;
      .supplier {
        .supplier-name {
          background: #F5F9FC;
          line-height: 35px;
          padding-left: 3vw;
        }
        .stock-list {
          background: #FCFCFC;
          li {
            @include flexbox(space-between,
            center,
            row,
            nowrap);
            border-bottom: 1px solid #D4DCE1;
            .stock-item {
              @include flexbox(center,
              center,
              row,
              nowrap);
              color: #333;
              font-size: 12px;
              padding: 12px 0;
              flex-grow: 1;
              button {
                border: 1px solid #FF0000;
                line-height: 24px;
                padding: 0 0.2rem;
                color: #FF0000;
                border-radius: 30px;
                background: #ffffff;
                box-shadow: 0 0 0;
              }
              &:last-child {
                flex-grow: 1.5
              }
            }
          }
        }
      }
    }
  }
  /* 商品库存信息 */

</style>
<style lang="scss">
  #prodContent-container {
    width: 100%;
    clear: both;
    overflow: hidden;
  }

  #prodContent-container * {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

</style>
